Strokes in Figma are visual outlines applied to shapes, frames, vectors, text, and other design objects. They are used to define boundaries, create borders, emphasize elements, build icons, design illustrations, create dividers, and add visual hierarchy to user interfaces.
Strokes are an essential part of professional UI and graphic design because they allow designers to control the thickness, color, position, style, and appearance of an object's outline. For structured Figma learning, explore JustAcademy Figma Training and practice through the Register for Figma Course Demo.
A stroke is an outline or border applied around a design object. It can be added to shapes such as rectangles, circles, polygons, lines, vectors, frames, and other supported layers.
Object
+----------------------+
| |
| CONTENT |
| |
+----------------------+
<------ Stroke ------>
The fill controls the inside of an object, while the stroke controls its outline.
| Feature | Fill | Stroke |
|---|---|---|
| Purpose | Controls the inside of an object | Controls the outline of an object |
| Position | Inside the shape | Around the shape |
| Example | Blue card background | Gray card border |
| Common Use | Backgrounds and surfaces | Borders, dividers, outlines |
| Can be transparent? | Yes | Yes |
Strokes help create clear visual boundaries between elements. They are particularly useful when the background and foreground colors are similar or when a designer needs to visually separate one component from another.
After selecting a compatible layer, stroke controls can be found in the right-side properties panel. The Stroke section allows designers to add a stroke and control its appearance.
Select Object
|
v
Right Sidebar
|
v
Stroke
|
+-- Color
+-- Opacity
+-- Weight
+-- Position
+-- Alignment
+-- Join
+-- Cap
+-- Dash Pattern
Stroke color determines the color of the object's outline. It can be a solid color, transparent color, or other supported fill treatment depending on the object and design requirements.
For example, a white card can use a light gray stroke to create a subtle boundary.
Card
+----------------------------+
| |
| Card Content |
| |
+----------------------------+
Stroke: #D9DDE3
Weight: 1px
Stroke opacity controls how transparent the stroke appears. Reducing opacity is useful for subtle borders and decorative outlines.
| Opacity | Visual Effect | Typical Use |
|---|---|---|
| 100% | Strong border | Important boundaries |
| 80% | Slightly softer | Standard UI borders |
| 60% | Subtle | Secondary borders |
| 30% | Very subtle | Decorative borders |
| 0% | Invisible | Hidden stroke |
Stroke weight controls the thickness of the stroke. A smaller weight creates a subtle outline, while a larger weight creates a stronger visual boundary.
1px
+----------------+
| |
+----------------+
2px
==================
|| ||
==================
4px
##################
## ##
##################
The appropriate stroke weight depends on the design system, object size, display resolution, and visual hierarchy.
| Weight | Typical Usage |
|---|---|
| 1px | Subtle borders, inputs, dividers |
| 2px | Buttons, selected states, icons |
| 3px | Emphasis and illustrations |
| 4px+ | Large illustrations and decorative graphics |
These are general starting points. A design system should define consistent values according to its visual language.
Stroke position determines how the stroke is positioned relative to the object's path or boundary. Depending on the selected object, Figma provides different positioning options.
Common stroke alignment concepts include Inside, Center, and Outside.
| Position | Description | Common Use |
|---|---|---|
| Inside | Stroke is placed toward the inside of the object | UI borders and precise layouts |
| Center | Stroke is centered around the path | General-purpose shapes |
| Outside | Stroke extends outward from the object boundary | Decorative outlines |
An inside stroke keeps the stroke within the object's boundary. This can be useful when maintaining precise component dimensions is important.
+----------------------+
| #################### |
| # # |
| # CONTENT # |
| # # |
| #################### |
+----------------------+
Stroke stays inside
A centered stroke is positioned around the object's path. Part of the stroke occupies the inside area and part extends toward the outside.
Stroke
↓
---+----------+---
| |
| CONTENT |
---+----------+---
An outside stroke extends away from the object boundary. It is useful when the interior dimensions should remain unchanged while adding a visual outline outside the object.
Stroke alignment becomes important when designing pixel-sensitive interfaces. A border that changes the effective content area can affect spacing, component dimensions, and alignment.
For design systems, choose a consistent stroke position and use it consistently across related components.
Figma allows designers to use multiple stroke layers on supported objects. Multiple strokes can be useful for creating complex borders, outlines, highlights, and decorative effects.
Object
|
+-- Stroke 1
| Weight: 1px
| Color: Dark
|
+-- Stroke 2
Weight: 4px
Color: Light
Multiple strokes should be used carefully because excessive borders can make an interface visually heavy.
When multiple strokes are applied, their order can influence the final visual appearance. Designers should arrange strokes intentionally when creating layered outlines.
Top Stroke
|
v
+------------------+
| Main Object |
+------------------+
^
|
Bottom Stroke
Strokes can be solid or dashed depending on the design requirements. Dashed strokes are useful for indicating boundaries, construction areas, placeholders, diagrams, and special states.
| Stroke Style | Appearance | Usage |
|---|---|---|
| Solid | Continuous line | Cards, buttons, inputs |
| Dashed | Separated line segments | Drop zones, placeholders |
| Dotted | Small repeated marks | Guides and decorative elements |
Dashed strokes create a repeated line pattern. They are commonly used for upload areas, placeholder containers, design boundaries, and diagram connections.
+ - - - - - - - - - - +
| |
| Drop File Here |
| |
+ - - - - - - - - - - +
Stroke joins control how two connected stroke segments meet at a corner. Join settings are especially important when designing vector icons, illustrations, logos, and geometric shapes.
Common join concepts include Miter, Round, and Bevel.
| Join | Appearance | Typical Use |
|---|---|---|
| Miter | Sharp corner | Geometric illustrations |
| Round | Rounded corner | Friendly UI icons |
| Bevel | Corner is cut off | Technical and geometric graphics |
A miter join creates a sharp corner where two stroke segments meet. It is useful for precise geometric designs and sharp-edged illustrations.
/\
/ \
/ \
/ \
Sharp corner
A round join creates a curved connection between stroke segments. It is commonly used for friendly iconography and rounded visual styles.
___
/ \
/ \
Rounded corner
A bevel join cuts off the sharp corner of a stroke. It can be useful for technical illustrations and geometric designs.
Stroke caps control how the ends of open paths and lines appear. Common cap styles include Butt, Round, and Square.
| Cap | Description | Usage |
|---|---|---|
| Butt | Ends at the path endpoint | Technical lines |
| Round | Rounded end | Friendly icons and illustrations |
| Square | Extends beyond endpoint with a squared end | Strong graphical lines |
Round caps are frequently used in modern interface icons because they produce softer visual forms.
Butt:
|----------|
Round:
(----------)
Square:
|----------|
Lines are naturally represented using strokes. Designers can control their weight, color, caps, joins, and dash pattern.
Simple Line
----------------------------
Thick Line
============================
Dashed Line
---- ---- ---- ---- ---- ----
Dotted Line
. . . . . . . . . . . . . .
Shapes such as rectangles, ellipses, polygons, and stars can use strokes to create outlines.
Rectangle
+------------------+
| |
| |
+------------------+
Circle
______
/ \
| |
\________/
Vector paths rely heavily on strokes for creating icons, illustrations, logos, and custom graphics. Designers can combine multiple paths with different stroke weights and cap styles.
Consistent strokes are essential for creating a professional icon system. Icons should generally follow consistent stroke weight, cap style, join style, and visual proportions.
| Icon Property | Consistency Requirement |
|---|---|
| Stroke Weight | Use a consistent base weight |
| Cap | Keep similar icons consistent |
| Join | Use a consistent corner language |
| Color | Follow the icon color system |
| Scale | Preserve visual weight at different sizes |
Buttons can use strokes to define boundaries, especially for secondary, tertiary, outlined, and destructive button styles.
Primary Button
+----------------------+
| Submit |
+----------------------+
Solid background
Outlined Button
+----------------------+
| Cancel |
+----------------------+
Stroke + transparent fill
Input fields commonly use strokes to communicate their boundaries and interaction states.
| State | Possible Stroke Treatment |
|---|---|
| Default | Subtle neutral stroke |
| Hover | Slightly stronger stroke |
| Focus | Strong accent stroke |
| Error | Error color stroke |
| Success | Success color stroke |
| Disabled | Reduced visual emphasis |
Cards can use subtle strokes instead of or in combination with shadows. A border can create a clear boundary without requiring a large shadow.
+--------------------------------+
| |
| Product Card |
| |
| Product Name |
| ₹999 |
| |
+--------------------------------+
Stroke: subtle neutral color
Strokes and shadows can be combined to create layered surfaces. The stroke establishes the boundary while the shadow separates the component from the background.
Background
|
+-- Card Stroke
|
+-- Card Fill
|
+-- Card Shadow
|
v
Elevated Card
Use both carefully. A strong stroke and strong shadow together can make a component look visually heavy.
A selected card, layer, tab, or component can use a stronger stroke to communicate selection.
Default
+------------------+
| Option A |
+------------------+
Selected
+==================+
|| Option A ||
+==================+
The selected state should be visually distinguishable without depending exclusively on stroke color when accessibility is important.
Focus indicators help users identify the currently active interactive element. A visible stroke or outline can be used as part of the focus treatment.
Normal
+----------------+
| Search |
+----------------+
Focused
+================+
|| Search ||
+================+
Focus indicators should have sufficient visual distinction and should not disappear against the background.
Input fields and form controls can use an error-colored stroke to communicate invalid input.
+--------------------------+
| Email address |
+--------------------------+
Error: Invalid email
Use the stroke together with an error message, icon, or other clear indication rather than relying only on color.
Success states can use a success-colored stroke around inputs, cards, or confirmation components.
+--------------------------+
| Payment Completed |
+--------------------------+
✓ Success
Dashed strokes are frequently used for file upload and drag-and-drop areas.
+ - - - - - - - - - - - - +
| |
| Upload File |
| |
| Drag & Drop Here |
| |
+ - - - - - - - - - - - - +
A divider can be created using a thin rectangle or a line with a stroke. Dividers separate content sections while maintaining visual hierarchy.
Section Heading
--------------------------------
Next Content
Use subtle colors for dividers unless a stronger separation is intentionally required.
Strokes are important in data visualization for lines, chart outlines, axes, grid lines, and data series.
100 | /\
80 | / \
60 | /\ / \
40 | / V \
20 |/
0 +---------------->
Different stroke weights and colors can establish a hierarchy between primary data, secondary data, grid lines, and axes.
Illustrations often use strokes to define shapes and visual boundaries. Consistent stroke weight creates a unified illustration style.
Strokes can be used as part of logo construction, although designers should carefully evaluate how stroke weight behaves at different sizes.
A logo that looks good at a large presentation size may require adjustments for small sizes such as app icons or favicons.
Stroke weight should remain visually appropriate when components are resized. A 1px border may look suitable on a desktop interface but may need visual evaluation at smaller sizes.
When using strokes with Auto Layout components, designers should consider the relationship between borders, padding, component dimensions, and content spacing.
Component
+--------------------------+
| Stroke |
| +--------------------+ |
| | Padding | |
| | | |
| | Content | |
| | | |
| +--------------------+ |
+--------------------------+
Consistent component sizing and padding help prevent unexpected visual differences between components.
Strokes should be part of the component design system when they define component states or appearance. For example, an input component can have different stroke treatments for default, hover, focus, error, and disabled states.
Input Component
|
+-- Default
+-- Hover
+-- Focus
+-- Error
+-- Success
+-- Disabled
Variants allow designers to maintain multiple component states while keeping them connected. Stroke properties can change between variants.
| Variant | Stroke Treatment |
|---|---|
| Default | Neutral 1px stroke |
| Hover | Stronger neutral/accent stroke |
| Active | Accent stroke |
| Error | Error stroke |
| Disabled | Subtle stroke |
Reusable styles help maintain consistency across a large Figma project. A design system can define standard border colors and stroke weights for components.
Border System
|
+-- Border/Default
+-- Border/Subtle
+-- Border/Strong
+-- Border/Focus
+-- Border/Error
+-- Border/Success
Use descriptive names for reusable styles. A scalable naming system can organize styles according to purpose rather than individual screen names.
| Style Name | Purpose |
|---|---|
| Border/Default | Standard UI border |
| Border/Subtle | Low-emphasis boundary |
| Border/Strong | Strong component boundary |
| Border/Focus | Focus state |
| Border/Error | Error state |
| Border/Success | Success state |
Stroke colors should come from a consistent color system. Instead of choosing random gray values for every component, define a small set of border colors with clear semantic meanings.
Border Colors
|
+-- Neutral
+-- Subtle
+-- Strong
+-- Brand
+-- Focus
+-- Error
+-- Success
+-- Warning
A stroke can use transparency to create subtle visual boundaries. This is useful for glass-style interfaces and layered surfaces.
Glass Card
+-------------------------+
| |
| Content |
| |
+-------------------------+
Stroke: White
Opacity: Low
Gradient-based stroke treatments can be used for decorative designs and advanced visual interfaces where supported by the object and fill/stroke configuration.
Gradient strokes are particularly useful for colorful borders, futuristic interfaces, illustrations, and decorative cards.
Stroke appearance can also be combined with transparency and blending techniques to create more advanced visual effects.
Base Object
|
+-- Stroke Color
|
+-- Stroke Opacity
|
+-- Blend Treatment
|
v
Final Border Appearance
Glassmorphism designs often use a subtle light stroke around translucent surfaces. The border helps define the glass surface against a blurred or colorful background.
Background
~~~~~~~~~~~~~~~
+----------+
| Glass |
| Card |
+----------+
^ ^
| |
Fill Subtle Stroke
Dark mode interfaces require careful border selection. A bright white stroke can become too strong, so designers often use subtle neutral or translucent borders.
| Light Mode | Dark Mode |
|---|---|
| Light gray border | Dark or translucent light border |
| Dark focus border | Bright accent focus border |
| Subtle neutral divider | Subtle dark/light divider |
Strokes can contribute to accessibility by making boundaries and states visible. However, important information should not depend only on a border color.
In web development, a Figma stroke commonly maps to the CSS border property.
.card {
border: 1px solid #D9DDE3;
}
.button {
border: 2px solid #2563EB;
}
.input {
border: 1px solid #CBD5E1;
}
When a Figma object has rounded corners and a stroke, the equivalent web implementation generally uses border-radius together with border.
.card {
border: 1px solid #D9DDE3;
border-radius: 12px;
padding: 24px;
}
A dashed Figma stroke can commonly be represented using the CSS border-style property.
.drop-zone {
border: 2px dashed #94A3B8;
border-radius: 12px;
padding: 32px;
}
Create a complete button system using different stroke treatments.
Button System
|
+-- Primary
| Fill + No/Minimal Stroke
|
+-- Secondary
| Transparent Fill + Stroke
|
+-- Ghost
| Minimal/No Stroke
|
+-- Focus
| Accent Stroke
|
+-- Disabled
Subtle Stroke
Create a registration form containing name, email, password, phone number, and address fields.
Create a drag-and-drop upload component using a dashed stroke.
+ - - - - - - - - - - - - - +
| |
| Upload |
| |
| Drag files here |
| |
| Browse Files |
| |
+ - - - - - - - - - - - - - +
Create a small icon library using a consistent stroke system.
Keep stroke weight, joins, caps, and visual proportions consistent across the set.
Create four dashboard cards with consistent strokes.
+----------------+ +----------------+
| Total Users | | Total Orders |
| 12,450 | | 3,240 |
+----------------+ +----------------+
+----------------+ +----------------+
| Revenue | | Pending |
| ₹8,45,000 | | 128 |
+----------------+ +----------------+
Use a consistent border system and combine strokes with subtle shadows where appropriate.
Create Basic, Professional, and Enterprise pricing cards. Use strokes to distinguish the selected or recommended plan.
+------------------+
| Basic |
| |
| ₹499 |
| |
| Select |
+------------------+
+==================+
|| Professional ||
|| ||
|| ₹999 ||
|| ||
|| Popular ||
+==================+
Selected/Recommended
Define Design System
|
v
Choose Stroke Color
|
v
Choose Stroke Weight
|
v
Choose Position
|
v
Choose Join / Cap
|
v
Choose Solid / Dashed
|
v
Apply to Component
|
v
Create Variant States
|
v
Create Reusable Style
|
v
Test Accessibility
|
v
Final Review
| Property | Purpose | Example |
|---|---|---|
| Color | Defines border color | Gray card border |
| Opacity | Controls transparency | Subtle glass border |
| Weight | Controls thickness | 1px input border |
| Position | Controls stroke placement | Inside border |
| Join | Controls corners | Round icon corners |
| Cap | Controls line ends | Round line ends |
| Dash | Creates repeated stroke patterns | Upload area |
A stroke is an outline applied around a supported design object. It can define the object's boundary and can be customized through color, weight, opacity, position, and other properties.
Fill controls the inside appearance of an object, while stroke controls its outline or boundary.
Stroke weight defines the thickness of the stroke.
Stroke position determines how the stroke is aligned relative to the object's path or boundary.
Stroke joins determine how connected stroke segments meet at corners. Common types include Miter, Round, and Bevel.
Stroke caps determine the appearance of the ends of open paths and lines. Common types include Butt, Round, and Square.
Dashed strokes are commonly used for upload areas, placeholders, boundaries, diagrams, and decorative elements.
They are commonly represented using CSS border properties, although the exact implementation depends on the object and design.
Consistent stroke weight, joins, and caps help create a unified visual language across an icon set.
Yes. Strokes can communicate default, hover, focus, selected, error, success, and disabled states when used consistently and accessibly.
Create a complete Figma UI kit focused on strokes.
Strokes are one of the fundamental visual tools in Figma. They allow designers to create borders, outlines, dividers, icons, illustrations, component states, form controls, cards, and many other interface elements. By controlling stroke color, opacity, weight, position, joins, caps, and dash patterns, designers can create precise and consistent visual systems.
For professional Figma work, strokes should be treated as part of the overall design system rather than as isolated decorative elements. Consistent stroke values improve UI hierarchy, component consistency, icon design, accessibility, and developer handoff. To continue learning Figma concepts in a structured way, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
